写在前面------

因为工作内容的因素，最近这2年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。 

***********************************

Chapter 3

第三章

Functional Patterns

功能模式

In this chapter we’ll discuss the role of functional patterns and why they should be defined early in the design process.

在本章中，我们将讨论功能模式的作用，以及为什么应该在设计过程的早期定义它们。

Functional patterns are the tangible building blocks of the interface. Their purpose is to enable or encourage certain user behaviors.

功能模式是界面的有形构建块。它们的目的是支持或鼓励某些用户行为。

On the ten-minute cooking site, some of those behaviors included selecting ingredients, choosing a recipe, and following steps within an allocated time. The functional patterns we design will be informed by those behaviors. Functional patterns, or modules¹, are largely shaped by the domain a product belongs to. The patterns in our cooking app would be quite different from, say, finance software. Instead of recipe cards we’d be dealing with task bars, data fields, grids, charts and graphs.
在10分钟的烹饪网站上，其中一些行为包括选择配料，选择食谱，以及在分配的时间内按照步骤操作。我们设计的功能模式将从这些行为中获得信息。功能模式(或模块1)在很大程度上是由产品所属的领域决定的。我们的烹饪应用程序中的模式将与诸如金融软件有很大的不同。我们将处理任务栏、数据字段、网格、表格和图表，而不是菜谱卡。

Functional patterns can be simple or they can combine to create more complex patterns. A recipe card is made of a meal title, image, ingredients, and an action button. Each module within the recipe card has its own goal: the title tells us what the meal is; the image provides a preview of the final result; ingredient icons allow us to scan the cards more easily. Together, those modules help to achieve a shared purpose: to encourage people to cook the meal shown on the recipe.
功能模式可以是简单的，也可以结合起来创建更复杂的模式。食谱卡由膳食标题、图像、配料和动作按钮组成。菜谱卡中的每个模块都有自己的目标：标题告诉我们食物是什么；图像提供最终结果的预览效果；配料图标允许我们更容易地扫描阅读卡片内容。这些模块一起帮助实现了一个共同的目标：鼓励人们烹饪食谱上显示的食物。

As the product evolves, so do the patterns. We might start allowing our users to rate the recipes, and the rating display will become part of the recipe card. Or we might decide that the layout of the card can be improved, or that ingredient icons should be made clearer, or that we need to introduce a compact version of the card. We test and iterate the patterns to try to make them work better to achieve their purpose; that is, encouraging the behaviors more effectively.
随着产品的发展，模式也在发展。我们可能开始允许用户对菜谱进行评分，而评分显示将成为菜谱卡的一部分。或者我们可以决定优化卡片的布局，或者配料图标应该更清晰，或者我们需要引入卡片的紧凑版本。我们测试并迭代这些模式，试图使它们更好地工作以实现其目的，即更有效地鼓励行为。

Articulating the purpose of the patterns early in the design process can help prevent duplication as the product grows. At first, it might not seem to be worth the effort; after all, a product can change too fast in its early days to be able to pin down all the interface parts. But do the core functional patterns really change that much? Let’s take FutureLearn as an example and see how the interface evolved in the three years since the initial design.
在设计过程的早期阐明模式的用途可以帮助防止产品增长时的重复。一开始，这似乎不值得努力；毕竟，一个产品可能在其早期变化太快，无法确定所有的界面部分。但核心功能模式真的有那么大的变化吗？让我们以FutureLearn为例，看看界面从三年前的最初的设计到现在是如何演变的。

Patterns Evolve, Behaviors Remain

模式进化，行为保留。

Since it was founded by the Open University in 2013, FutureLearn’s vision has been to “inspire all to learn through telling stories, provoking conversation, and celebrating progress.” To be able to do that, as a minimum we had to make sure people could discover and join an online course, motivate them to progress through, and make the learning experience rewarding and stimulating. This vision informed the initial functional patterns on FutureLearn.
自从2013年由公开大学创建以来，FutureLearn的愿景一直是“通过讲故事、激发对话和庆祝进步来激励所有人去学习”。要做到这一点，至少我们必须确保人们能够发现并加入在线课程，激励他们不断进步，并使学习经验得到回报和激励。这一愿景为FutureLearn的最初功能模式提供了信息。

Courses are arranged in units and there’s a linear flow to them — one part leads to another. On the interface level, this translates into a weekly structure. Each week is broken down into activities, and activities into steps. The course progress module is one of the core functional patterns: it allows learners to navigate the content of the course, shows their progress, and where the course is currently active.
课程是按单元安排的，并且以线性流动的形式从一个部分有一个到另一个部分。在界面级别上，以周为单位的形式组织起来。每周分为若干个活动，每个活动分为若干个步骤。课程进度模块是核心功能模式其中之一：它允许学员浏览课程内容，展示他们的进度，以及当前处于活动状态课程的位置。

Course progress module on FutureLearn.

FutureLearn的课程进度模块。

These patterns went through a few changes after they were first designed over three years ago. Their styles, and even functionality and interactions, have changed. Yet their purpose fundamentally stayed the same, as it’s connected to the core idea of how FutureLearn works.
这些模式在三年前首次设计之后经历了一些变化。他们的风格，甚至功能和互动，都发生了变化。然而，他们的目的基本上保持不变，因为这与未来学习（FutureLearn）如何运作的核心理念有关。

The To Do page went through several revisions over the course of three years but the purpose of the core modules stayed the same.
在三年的时间里，待办页面经历了几次修改，但核心模块的目的保持不变。

Similarly, discussion threads on FutureLearn have evolved over time, as the volume of people participating has increased: the layout of the threads, the interactions and the filtering features have evolved, but their core purpose remains largely the same — to engage learners in conversation and allow them to learn from each other.
同样，随着参与人数的增加，未来学习上的互动交流区也在不断变化：交流内容的布局、交互和过滤功能都有了变化，但它们的核心目的基本上是一样的--让学习者参与对话，让他们相互学习。

Discussion pages went through several iterations once they were designed but the purpose of the core modules was unchanged.

讨论页面在设计之后经历了几次迭代，但核心模块的目的没有改变。

The core unit for displaying course details has also evolved over three years, to allow users to see a larger selection of course listings before needing to scroll down the page. But again, the purpose of the pattern remains the same — to allow people to discover and join the courses they’re interested in.

显示课程详细信息的核心单元也经过了三年的发展，允许用户在无需向下滚动页面就能够看到更大的课程列表选项。但同样，这种模式的目的也是一样的--让人们发现并加入他们感兴趣的课程。

Course list evolved over years, to allow users to see a larger selection of course listings.

课程列表经过多年的发展，允许用户看到更大的课程列表选项。

As often happens in the early start-up days, because of time constraints and other priorities, many core functional patterns weren’t defined. As FutureLearn’s interface and educational functionality grew, patterns were duplicated. We ended up with several course progress modules, variations of a comment module, and a few different course blocks and course cards across the site. Perhaps this was inevitable. Or could some of those duplications have been prevented?

正如创业初期经常发生的那样，由于时间限制和其他优先事项，许多核心功能模式没有被定义。随着FutureLearn的界面和教育功能的发展，模式被复制了。最终网站中出现了几种不同的课程进度模块，若干个评论模块的各种变体，以及一些不同的课程块和课程卡。也许这是不可避免的。或者可以避免其中的一些重复吗？

When a pattern is not defined and shared in the team, you start recreating it to accomplish similar goals: another promotional module, another news feed, another set of sharing links, another dropdown. Before you know it, you end up with 30 different product displays and pop-over menus.
当一个模式没有在团队中定义和共享时，你就开始重新创建它来实现类似的目标：另一个推广模块、另一个新闻提要、另一组共享链接、另一个下拉列表。在你意识到这一点之前，你最终会看到30个不同的产品显示和弹出菜单.。

Patterns are the physical embodiment of the behaviors we’re trying to encourage or enable through the interface. Their execution, content, interactions and presentation can change. (In fact, patterns don’t even have to be visual — they can be read out by a voice, or embodied in another way.) But the core behaviors they’re designed to encourage remain relatively stable, as they stem from the purpose of your product and the idea of how it works. Being conscious of the purpose of your key patterns can help you understand how your system works and prevent it from fragmenting as it evolves.
模式是我们试图通过界面鼓励或支持的行为的实际载体。它们的执行、内容、交互和表现形式都会发生变化。(事实上，模式甚至不必是视觉的--它们可以通过声音读出，或者以另一种方式体现出来。)。但是，它们旨在鼓励的核心行为仍然相对稳定，因为它们源于您的产品的目的和它如何工作的想法。意识到关键模式的目的可以帮助您理解系统是如何工作的，并防止它在演化过程中发生碎片化。

Defining Functional Patterns

定义功能模式。

Defining patterns early in the design process doesn’t have to take a lot of time. There are techniques that can be integrated into your process without extra effort. Here are a few that I find particularly helpful.

在设计过程的早期定义模式并不需要花费很多时间。有一些技术可以集成到您的过程中，而无需付出额外的努力。这里有几个我觉得特别有用的方法。

Create a Pattern Map
创建模式地图。

To map out your customers’ needs, goals and motivations you might have done

详细规划你的整理好的客户需求，目标和动机。

customer experience mapping², “job to be done,”³ or a similar exercise around customer journeys. The outcomes typically feed into the early design explorations and prototypes. At this point, there’s usually a fairly clear understanding of the behaviors we want to encourage or enable in our users: learn about a course, join a course, engage in a discussion. But once we focus on the interface, sometimes we get lost in the details. We spend time making the most impressive page header, forgetting what this header is for and how it affects the user in different parts of their journey. In other words, we lose the connection between user behaviors and the exact patterns that encourage or enable those behaviors.
客户体验地图2，“要完成的工作”，3或围绕客户旅程的类似练习。得出的结论通常会体现到早期的设计探索和原型中。在这一点上，通常有一个相当清楚的理解，我们希望鼓励或支持的用户行为，在我们的用户：学习一个课程，参加一个课程，参与讨论。但一旦我们专注于界面，有时我们会迷失在细节中。我们花时间做最令人印象深刻的页面头部，忘记了这个页面头部是干什么的，以及在用户的旅程的不同部分会产生什么影响。换句话说，我们失去了用户行为和鼓励或支持这些行为的确切模式之间的联系。

To see how your patterns fit into a bigger picture, try to map some of your core modules to the sections of a user journey. Think about what each section is for and what behaviors it’s designed to encourage. You don’t need to worry about capturing every icon or button at this point. Focus on the big picture: understand the parts of the system and how they work together. For FutureLearn, it was primarily focused on three areas: discovering content, learning on a course, and achieving a goal.
要查看您的模式如何适应更大的环境，请尝试将一些核心模块映射到用户旅程的各个部分。想一想每一节的目的是什么，设计它的目的是鼓励什么行为。在这一点上，您不需要担心捕捉每个图标或按钮。关注全局：了解系统的各个部分以及它们是如何协同工作的。对于未来学习FUtureLearn，它主要集中在三个方面：发现内容，学习一门课程，实现一个目标。

Some of FutureLearn’s functional patterns mapped to three key stages of a user journey.

FutureLearn的一些功能模式映射到用户旅程的三个关键阶段。

Keeping this map in my mind helped me to think in families of patterns joined by a shared purpose, rather than individual pages. For example, instead of designing a course list page, I’d think of the “Discovery” area as a whole. What are the behaviors we need to encourage at this stage of the user journey? What are the patterns that can support those behaviors? Where else on the site do they exist and how do they work there? If it’s a new pattern, how does it contribute to the whole system? Thinking of all these questions is part of designing systematically.

把这张图印在脑海中，有助于我将其理解为因为一个共享的目标结合而成的模式家族，而不是相互独立的页面。例如，与其设计课程列表页面，不如将“发现”区域作为一个整体来考虑。在用户旅程的这个阶段，我们需要鼓励哪些行为？哪些模式能够支持这些行为？在网站的其他地方，他们还存在，他们如何在那里工作？如果这是一种新的模式，它如何对整个系统作出贡献？对这些问题的思考是系统设计的一部分。